<!--职业健康体检结果   examinationResult-->
<template>
  <Layout>
    <Form ref="form1" :model="dataToQuery" :label-width="140">
      <Row v-show="!switchFlag" class="query-form" >
        <Col span="8">
            <FormItem label="企业名称：" prop="org">
              <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
            </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="员工姓名：" prop="name">
            <Input class=''placeholder="请填写姓名" type='text' v-model='dataToQuery.name'></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
          <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="企业名称：" prop="order">
            <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="员工姓名：" prop="name">
            <Input class=''placeholder="请填写姓名" type='text' v-model='dataToQuery.name'></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="工种：" prop="profession">
            <Input v-model='dataToQuery.profession' class="query-form-el" placeholder="请填写工种"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label='接害工龄（>=）：' prop='workYears'>
            <InputNumber class='query-form-el' placeholder="请填写接害工龄" min="0" type='text' v-model='dataToQuery.workYears'></InputNumber>
          </FormItem>
        </Col>
        <Col span="8"></Col>
        <Col span="8" offset="8">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
           border :columns="columns1"  :data="dataTable" >
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24" >
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
      </Col>
    </Row>
    <Modal  title="体检结果" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=600 :styles="{height:'865px'}"  class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?100:null" :label-position="mode === 'view'?'right':'top'">

		    <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='企业名称：' prop='eventOrgId'>
                  <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                  <cascader-dom v-else ref='orgCascader'
                                @setOrgInfo='(data)=>{cascaderDomIdChangeHandle(data,"companyId");}'
                                @setOrgname='(data)=>{cascaderDomNameChangeHandle(data,"companyName");}'
                                :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" >
                  </cascader-dom>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='姓名：' prop='name'>
                  <div v-if="mode === 'view'">{{ dataToView.name }}</div>
                  <Input v-else class=''placeholder="请填写姓名" type='text' v-model='dataToView.name'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='性别：' prop='gender'>
                  <div v-if="mode === 'view'">{{ dataToView.gender==1?'男':'女' }}</div>
                  <Select v-else class=''placeholder="请选择性别" type='text' v-model='dataToView.gender'>
                    <Option  value="1" >男</Option>
                    <Option  value="2" >女</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='身份证号：' prop='idCard'>
                    <div v-if="mode === 'view'">{{ dataToView.idCard }}</div>
                    <Input v-else class=''placeholder="请填写身份证号" type='text' v-model='dataToView.idCard'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='工种：' prop='profession'>
                    <div v-if="mode === 'view'">{{ dataToView.profession }}</div>
                    <Input v-else class=''placeholder="请填写工种" type='text' v-model='dataToView.profession'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='接害工龄：' prop='workYears'>
                    <div v-if="mode === 'view'">{{ dataToView.workYears }}</div>
                    <InputNumber v-else class='w'placeholder="请填写接害工龄" min="0" type='text' v-model='dataToView.workYears'></InputNumber>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='体检类别：' prop='examCategory'>
                    <div v-if="mode === 'view'">{{ dataToView.examCategory }}</div>
                    <Input v-else class=''placeholder="请填写体检类别" type='text' v-model='dataToView.examCategory'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='体检日期：' prop='examDate'>
                    <div v-if="mode === 'view'">{{ dataToView.examDate.substr(0,10) }}</div>
                    <DatePicker v-else class="w" placeholder="请选择体检日期" v-model='dataToView.examDate' ></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填表人：' prop='registrant'>
                  <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                  <Input v-else type='text' v-model='dataToView.registrant' readonly></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='填表时间：' prop='registTime'>
                  <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                  <DatePicker v-else type="date" placeholder="请选择日期" class="w" v-model='dataToView.registTime' readonly></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='体检结果：' prop='examResult'>
                    <div v-if="mode === 'view'">{{ dataToView.examResult }}</div>
                    <Input v-else class=''placeholder="请填写体检结果" type='textarea' v-model='dataToView.examResult'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
				  <FormItem label='体检结论：' prop='examConclusion'>
				   <div v-if="mode === 'view'">{{ dataToView.examConclusion }}</div>
				   <Input v-else class=''placeholder="请填写体检结论" type='textarea' v-model='dataToView.examConclusion'></Input>
				  </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='处理意见：' prop='suggestion'>
                    <div v-if="mode === 'view'">{{ dataToView.suggestion }}</div>
                    <Input v-else class=''placeholder="请填写处理意见" type='textarea' v-model='dataToView.suggestion'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='备注：' prop='notes'>
                    <div v-if="mode === 'view'">{{ dataToView.notes }}</div>
                    <Input v-else class=''placeholder="请填写备注" type='textarea' v-model='dataToView.notes'></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
        <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {formatDate} from '@/tools/index'
import _deepclone from 'lodash/cloneDeep'
var cascaderDom = () => import('@/components/cascader-dom.vue');
import pageCommonFunction from '@/components/pageCommonFunction.js'
export default {
  components:{
    cascaderDom
  },
  data(){
    return{
      ...this.createCommonDataField(),
      columns1: [
        { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        { key:'companyName',title: '企业名称',  align: 'center', minWidth:220  },
        { key:'name',title: '姓名',  align: 'center' , minWidth:120},
        { key:'gender',title: '性别',  align: 'center', minWidth:120 ,render:(h, params)=>{return h('span', params.row.gender==1?'男':'女')}},
        { key:'idCard',title: '身份证号',  align: 'center', minWidth:180 },
        { key:'profession',title: '工种',  align: 'center', minWidth:120 },
        { key:'workYears',title: '接害工龄',  align: 'center', minWidth:120 },
        { key:'examCategory',title: '体检类别',  align: 'center', minWidth:120 },
        { key:'examDate',title: '体检日期',  align: 'center', minWidth:120, render: this.renderCellDate },
        { key:'examResult',title: '体检结果',  align: 'center', minWidth:200, tooltip:true },
        { key:'examConclusion',title: '体检结论',  align: 'center', minWidth:200, tooltip:true },
        { key:'suggestion',title: '处理意见',  align: 'center', minWidth:200 },
        { key:'notes',title: '备注',  align: 'center', minWidth:200, tooltip:true },
        this.getActionColumns(),
      ],
      ruleCustom : {
        workerId: [ { required: true, message: '请填写员工ID', trigger: 'change',}],
        companyId: [ { required: true, message: '请填写企业ID', trigger: 'change',}],
        companyName: [ { required: true, message: '请填写企业名称', trigger: 'change',}],
        gender: [ { required: true, message: '请填写性别', trigger: 'change',}],
        idCard: [ { required: true, message: '请填写身份证号', trigger: 'change',}],
        profession: [ { required: true, message: '请填写工种', trigger: 'change',}],
        workYears: [ { required: true, message: '请填写接害工龄', trigger: 'change',type:'number'}],
        examCategory: [ { required: true, message: '请填写体检类别', trigger: 'change',}],
        examDate: [ { required: true, message: '请填写体检日期', trigger: 'change',type:'date'}],
        examResult: [ { required: true, message: '请填写体检结果', trigger: 'change',}],
        examConclusion: [ { required: true, message: '请填写体检结论', trigger: 'change',}],
        suggestion: [ { required: true, message: '请填写处理意见', trigger: 'change',}],
        // notes: [ { required: true, message: '请填写备注', trigger: 'change',}],
      },
      tableHeight:10,

      // api
      queryUrl:Api.queryHealthApi.replace('{{type}}','examinationResult'),
      exportUrl:Api.exportHealthApi.replace('{{type}}','examinationResult'),
      deleteUrl:Api.deleteHealthApi.replace('{{type}}','examinationResult'),
      bthDeleteUrl:Api.batchDeleteHealthApi.replace('{{type}}','examinationResult'),
      getUrl:Api.getHealthApi.replace('{{type}}','examinationResult'),
      updateUrl:Api.updateHealthApi.replace('{{type}}','examinationResult'),
      saveUrl:Api.saveHealthApi.replace('{{type}}','examinationResult'),
    }
  },
  mounted() {
    this.tableHeight = window.innerHeight - 325
    this.query();
  },
  methods:{
    ...pageCommonFunction,
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    query() {
      this.dataToQuery.workYears = '',
      this.queryAjax();
    },
    submit(name) {
      this.submitAjax(name);
    },
	createEmptyDataToAdd(){
	  return {
	    workYears: '',
	  }
	},
  },
  watch:{
  },
}
</script>

<style lang='css' scoped>
  .rpt-form{}
  /deep/ .rpt-form .query-form-el{width:100%;}
  /deep/ .rpt-form .ivu-form-item{margin-bottom: 24px;}

</style>
